<template>
  <el-dialog
    title="修改小区信息"
    :visible.sync="dialogVisible"
    width="30%">
    <el-form :model="editArea2" ref="areaForm">
      <el-form-item label="小区名称：">
        <el-input v-model="editArea2.name" class="input-width"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  props: {
    editArea: {
      type: Object,
      default: () => Object.assign({},{name:'',id:0})
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      editArea2: Object.assign({},this.editArea)
    }
  },
  computed: {
    dialogVisible: {
      get(){
        return this.show
      },
      set(val){
        this.$emit('update:show',val)
      }
    }
  },
  watch: {
    editArea(val){
      let temp = this.$lodash.cloneDeep(val);
      this.editArea2 = temp;
    }
  },
  methods: {
    handleCancel(){
      this.dialogVisible = false
      this.$emit('cancel')
    },
    handleConfirm(){
      this.$emit('confirm',this.editArea2)
    }
  }
}
</script>

<style lang="scss" scoped>

.el-dialog__footer {
  text-align: center !important;
}

</style>
